<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title{
      padding: 20px;
      background-color: orange;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="app"></div>


  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
  // 创建虚拟DOM
  const Vdom = (
    <h2 id="title">
      <span>Hello</span>
    </h2>
  )
  
  //将变量给虚拟DOM
    let myID = 'MYid'
    let myData = 'Hello Mydata'

  const Vdom2 = (
    // 执行字符串toLocaleLowerCase，转化为小写
    <div>
      <h2  id={myID.toLocaleLowerCase()}>
        <span className="title" style={{color:'green',fontSize:'20px'}}>{myData}</span>  
      </h2>  
      <p>下面是两种标签闭合方式</p>
      <input type="text"/>
      <input type="text"></input>
    </div>
  )

  ReactDOM.render(Vdom2,document.getElementById('app'))


  /*
    JSX语法规则：
      1、定义虚拟DOM时，不要使用引号
      2、标签中混入JS 表达式 时使用{}
      3、样式的类名不能使用class，应使用className
      4、内联样式，要用style={{key:value}}的形式书写（有-连字符的，去掉连字符，改为驼峰写法
      5、虚拟DOM中只能有一个根标签
      6、标签必须闭合
      7、标签首字母
        (1).若为小写开头，则将该标签转为html中同名元素，若html中无该标签，则报错
        (2).若为大写开头，则React会渲染对应组件，若组件没有定义，则报错  
  
  */ 

  </script>
</body>
</html>